<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>国家精品</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="../css/gjjp.css"/>
	</head>
	<body>
		<div class="q_Course" id="q_Course">
			<div class="q_carousel">
				<section class="carousel">
				<ul>
					<li><img src="images/carousel01.webp" alt=""></li>
					<li><img src="images/carousel02.webp" alt=""></li>
					<li><img src="images/carousel03.webp" alt=""></li>
					<li><img src="images/carousel04.webp" alt=""></li>
				</ul>
				<ol class="points"></ol>
				</section>
			</div>
			<div class="q_tuijian">
				<div class="tj_course">
					<div class="tj_title">最新好课推荐</div>
					<div class="tj_courseli">
						<ul>
							<li v-for="(v,i) in q_Course">
								<img :src="v.img" >
								<div class="tj_info">
								<p class="tj_info_title">{{v.title}}</p>	
								<p class="tj_info_school">{{v.school}}</p>
								<p class="tj_renshu">{{v.txt}}</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="q_all_course">
				<div class="a_course">
					<span class="a_course_t">全部课程</span>
					<span class="xuan">筛选<img src="images/xiala.png" style="width: 13px;"></span>
				</div>
				<div class="a_main">
					<ul>
						<li v-for="(v,i) in q_course2">
							<a href="#">
								<div class="q_course_img">
									<img :src="v.img" style="width: 150px;">
									<span class="flag">国家精品</span>
								</div>
								<div class="b_course_info">
									<p class="b_title">{{v.name}}</p>
									<p class="b_cshool">{{v.school}}</p>
									<p class="b_time">
										<span class="c_time">
											<img :src="v.icon" style="width: 10px;">
											{{v.tip}}
										</span>
										<span class="c_renhsu">{{v.renshu}}</span>
									</p>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/quality.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#q_Course",
				data:{
					q_Course:[
						{img:"images/tuijian01.webp",title:"天文漫谈",school:"华中科技大学",txt:"5946人参加"},
						{img:"images/tuijian02.webp",title:"高等数学先修课",school:"西南财经大学",txt:"8750人参加"},
						{img:"images/tuijian03.webp",title:"术与人类文明",school:"广西大学",txt:"897人参加"},
						{img:"images/tuijian04.webp",title:"世界华文文学经典欣赏",school:"武汉大学",txt:"7478人参加"}
					],
					q_course2:[{img:"images/all01.webp",name:"生物医药实验安全知识",school:"暨南大学",icon:"images/icon_end01.png",tip:"已结束",renshu:"3734人参加"},
					{img:"images/all02.webp",name:"巧克毕业论文",school:"南昌大学",icon:"images/icon_kaike.png",tip:"2021-07-05开课",renshu:"1326人参加"},
					{img:"images/all03.webp",name:"教师如何做研究",school:"北京大学",icon:"images/icon_kaike.png",tip:"2021-07-04开课",renshu:"5930人参加"},
					{img:"images/all04.webp",name:"班主任的沟通艺术",school:"爱课程",icon:"images/icon_end.png",tip:"进行至第2周",renshu:"1413人参加"},
					{img:"images/all06.webp",name:"沟通心理学",school:"哈尔滨工业大学",icon:"images/icon_end.png",tip:"进行至第14周",renshu:"87943人参加"},
					{img:"images/all05.webp",name:"程序设计与算法(二) 算法基础",school:"北京大学",icon:"images/icon_end.png",tip:"进行至第5周",renshu:"2061人参加"},
					{img:"images/all07.webp",name:"大学英语自学课程(上)",school:"北京科技大学",icon:"images/icon_kaike.png",tip:"2021-07-10开课",renshu:"6465人参加"},
					{img:"images/all08.webp",name:"互联网金融",school:"中央财经大学",icon:"images/icon_end.png",tip:"进行至第3周",renshu:"6128人参加"}]
				}
			})
		</script>
	</body>
</html>
